<template>
  <div class="user-page">
    <div class="user-top">
      <img
        v-if="!show"
        src="http://liufusong.top:8080/img/profile/bg.png"
        alt="背景图"
      />
      <img v-else src="http://liufusong.top:8080/img/avatar.png" alt="背景图" />
    </div>
    <div class="user">
      <div class="my_user">
        <img src="http://liufusong.top:8080/img/profile/avatar.png" alt="" />
        <p v-if="!show">游客</p>
        <p v-else>{{ username }}</p>
        <div class="my_login">
          <router-link v-if="!show" class="login" to="/login"
            >去登录</router-link
          >
          <button v-else class="login" @click="exit">退 出</button>
          <p v-show="show">
            编辑个人资料 <i class="iconfont icon-shixiangyoujiantou-"></i>
          </p>
        </div>
      </div>
    </div>
    <div class="list">
      <van-grid :column-num="3">
        <van-grid-item icon="star-o" text="我的收藏" @click="toFavorate" />
        <van-grid-item icon="wap-home-o" text="我的出租" @click="toRent" />
        <van-grid-item icon="clock-o" text="看房记录" />
        <van-grid-item icon="hotel-o" text="成为房主" />
        <van-grid-item icon="contact" text="个人资料" />
        <van-grid-item icon="phone-circle-o" text="联系我们" />
      </van-grid>
    </div>
    <div class="footer">
      <img src="	http://liufusong.top:8080/img/profile/join.png" alt="" />
    </div>
  </div>
</template>

<script>
import { userList } from "@/api/user";
import { getToken } from "@/utils/storage";
import { delToken } from "@/utils/storage";
import { Dialog } from "vant";
export default {
  name: "user-page",
  data() {
    return {
      show: getToken(),
      username: "",
    };
  },
  async created() {
    const data = await userList();
    if (getToken()) {
      this.username = data.body.nickname;
    }
  },
  methods: {
    exit() {
      Dialog.confirm({
        title: "提示",
        message: "是否确定退出？",
        confirmButtonColor: "#21b97a",
      })
        .then(() => {
          getToken();
          // window.location.reload();
        })
        .catch(() => {
          close();
        });
      this.$toast.success("已退出登录");
      this.show = false;
      delToken();
    },

    toFavorate() {
      if (!getToken()) return this.$router.push("/login");
      this.$router.push("/favorate");
    },

    toRent() {
      if (!getToken()) return this.$router.push("/login");
      this.$router.push("/rent");
    },
  },
};
</script>

<style lang="less" scoped>
.user-top {
  img {
    width: 100%;
    height: 100%;
  }
}
.footer {
  margin-left: 16px;
  margin-top: 10px;
  img {
    position: fixed;
    bottom: 0;
    width: 90%;
    margin-bottom: 80px;
  }
}
.user-page {
  position: relative;
  .user {
    .my_user {
      position: absolute;
      top: 135px;
      width: 85%;
      height: 170px;
      margin: 0 28px;
      box-shadow: 5px 5px 8 #333;
      background-color: #fff;
      border: 2px solid #f5f5f5;
      border-radius: 3px;
      img {
        position: absolute;
        left: 130px;
        top: -25px;
        width: 60px;
        height: 60px;
      }
      p {
        font-size: 13px;
        text-align: center;
        margin-top: 50px;
      }
      .my_login {
        text-align: center;
        .login {
          display: inline-block;
          width: 70px;
          height: 30px;
          font-size: 13px;
          text-align: center;
          line-height: 30px;
          color: #fff;
          border: 1px solid #fff;
          border-radius: 5px;
          background-color: #21b97a;
        }
        p {
          margin-top: 20px;
          font-size: 12px;
          color: #999;
          i {
            font-size: 12px;
          }
        }
      }
    }
  }
}
.list {
  position: fixed;
  bottom: 200px;
}
</style>
